<template>
  <!-- 商品订单 -->
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品订单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0;display:flex;justify-content:start;">
            <div>
              <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">商品名称</span>
              <el-input v-model="search" size="small" clearable placeholder="请输入商品名称" prefix-icon="el-icon-search"
                style="width: 200px;" />
            </div>
            <div>
              <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">用户ID</span>
              <el-input v-model.number="s_userId" size="small" clearable placeholder="请输入id" prefix-icon="el-icon-search"
                style="width: 200px;" />
            </div>
            <div>
              <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">状态</span>
              <el-select v-model="value" size="small" placeholder="请选择" clearable style="width:90px;margin-right: 20px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
         
            <div style="margin-right: 20px;">
              <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;"
                size="small">搜索</el-button>
              <el-button icon="el-icon-refresh-left" style="margin-left: 5px;" @click="reset" size="small">重置</el-button>
              <el-button style="background-color: #143371; color: aliceblue;" size="small"
                  @click="dataGoodsOrderView">数据可视化</el-button>

            </div>

            <div>
              <download-excel
                class="export-excel-wrapper"
                :data="tableData"
                :fields="json_fields"
                type="xls"
                worksheet="My Worksheet"
                name="商品订单"
    >
      <el-button style="background-color: #143371; color: aliceblue;"
                size="small">导出</el-button>
    </download-excel>
            </div>
          </div>
        </div>

        <!--    表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%" :row-style="{ height: '32px' }"
          :cell-style="{ padding: '4px' }">


          <el-table-column label="#" type="index" />
          <el-table-column label="订单编号" prop="orderId" width="200px"/>
          <el-table-column label="商品名称" prop="goodsName" width="180px" />
          <el-table-column label="下单用户ID" prop="userId" />
          <el-table-column label="总价/￥" prop="sumPrice" sortable />
          <el-table-column label="数量" prop="goodsNum" sortable />
          <el-table-column label="创建时间" prop="orderTime" sortable width="200px" />

          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.tab == 1" type="info">未支付</el-tag>
              <el-tag v-if="scope.row.tab == 2" type="warning">未发货</el-tag>
              <el-tag v-if="scope.row.tab == 3" type="primary">已发货</el-tag>
              <el-tag v-if="scope.row.tab == 4" type="success">已收货</el-tag>
            </template>
          </el-table-column>


          <!--      操作栏-->
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button v-if="scope.row.tab==2" size="mini" type="warning" @click="handleTab(scope.$index, scope.row,3)">通知发货</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <el-dialog :visible.sync="DataVis" title="数据可视化" width="60%" top="60px">
          <R7dayGoodMoney :dataList="dataviewlist"></R7dayGoodMoney>
        </el-dialog>

      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
import R7dayGoodMoney  from '@/components/R7dayGoodMoney.vue';
export default {
  components:{R7dayGoodMoney},
  name: "GoodsOrderInfo",
  data() {



    return {
      s_userId:'',
      options: [
        {
          value: 1,
          label: '未支付'
        },
        {
          value: 2,
          label: '未发货'
        },
        {
          value: 3,
          label: '已发货'
        },
        {
          value: 4,
          label: '已收货'
        },
      ],
      dataviewlist:[121, 222, 433, 344, 565, 466, 577],
      
      DataVis:false,
      value: '',
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
      search: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      CoverdialogVisible: false,
      MoredialogVisible: false,
      json_fields:{
        订单编号:'orderId',
        下单用户:'userId',
        商品名称:'scName',
        门票数量:'num',
        总价:'sumPrice',
       
        下单时间:'createTime',
        订单状态:{
          field: "tab",
          //自定义回调函数
          callback: value => {
            if(value==1){
              return '未支付'
            }else if(value==2){
              return '未发货'
            }else if(value==3){
              return '已发货'
            }else{
              return '已收货'
            }
          }
        }

      },
      tableData: [
        {
          orderId: 1,
          goodsName: '耳机',
          sumPrice: 1000,
          goodsNum: 5,
          userId: 1,
          tab: 1,
          orderTime: '2021-11-2 10:00:11',
         
        },
        {
          orderId: 2,
          goodsName: '小本子',
          sumPrice: 100,
          goodsNum: 5,
          userId: 1,
          tab: 2,
          orderTime: '2021-11-2 10:00:11',
         
        }
      ],


      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {
    dataGoodsOrderView(){
      this.DataVis = true
    },
    async load() {
      request.get("/base-info/adminlist", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                search: this.search,
                userId:this.userId,
                status:this.value
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        });
    },
    handleTab(index, row,status){
      this.$confirm("点击确定", "修改提示", {
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "确定", //确认按钮文字
        cancelButtonText: "取消", //取消按钮文字
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      }).then(()=>{
         
       
        request.get("/base-info/updateTab",{
          params: {
              orderId:row.orderId,
              tab:status
            },
        }).then(res=>{
          if(res.code==='1'){
            this.tableData[index].tab = status;
            this.$message({
                type:'success',
                message:'修改成功'
            })
          }
        })
      })
     
    },
    reset() {
      this.search=null
      this.s_userId = null
      this.value = null
      this.load()
    },
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },

  }


}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
</style>